<template>
  <div class="central">
    <!-- 轮播图区域,导入组件进行传值 -->
    <swipe :swipeList="swipe" :isfull="true"></swipe>
    <!-- 中间九宫格区域 -->
    <div class="cent">
      <div class="nai" @click="$router.push('/newsList')">
        <img src="../../assets/img/xwzx.jpg" alt />
        <p>新闻资讯</p>
      </div>
      <div class="nai" @click="$router.push('/photo')">
        <img src="../../assets/img/tpfx.jpg" alt />
        <p>图片分享</p>
      </div>
      <div class="nai" @click="$router.push('/commodity')">
        <img src="../../assets/img/spgm.jpg" alt />
        <p>商品购买</p>
      </div>
    </div>
    <div class="cent">
      <div class="nai" @click="$router.push('/message')">
        <img src="../../assets/img/lyfk.jpg" alt />
        <p>留言反馈</p>
      </div>
      <div class="nai" @click="$router.push('/videoZone')">
        <img src="../../assets/img/spzq.jpg" alt />
        <p>视频专区</p>
      </div>
      <div class="nai" @click="$router.push('/contact')">
        <img src="../../assets/img/lxwm.jpg" alt />
        <p>联系我们</p>
      </div>
    </div>
  </div>
</template>

<script>
import swipe from "../../components/swipe/Swipe";
export default {
  name: "central",
  components: {
    swipe
  },
  data() {
    return {
      swipe: []
    };
  },
  created() {
    this.getSwpie()
  },
  methods: {
    getSwpie() {
      // 获取图片地址，放入轮播图中
      let swipeList = [
        { img: "http://img.tupianzj.com/uploads/allimg/160822/9-160R2093520.jpg" },
        { img: "http://img1.qunarzz.com/p/tts7/201309/06/86730db1da6f1dc093835fbb.jpg" },
        { img: "http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1110/10/c5/9223111_9223111_1318232649656.jpg" },
      ]
      this.swipe = swipeList
    }
  }
};
</script>

<style lang="scss" scoped>
.central {
  .cent {
    margin-top: 10%;
    .nai {
      flex: 1;
      text-align: center;
    }
    display: flex;
    justify-content: center;
    img {
      width: 50%;
      height: 70%;
    }
  }
}
</style>